<template>
  <!-- 基本信息 -->
  <Top-Page>
    <cu-custom bgColor="bg-gradual-white-3" :isBack="true">
      <template #content>基本信息</template>
    </cu-custom>

    <Field
      class="cell-3"
      disabled
      autosize
      label="个性签名"
      placeholder="一句话彰显自己..."
      v-model="userInfo.motto"
      @click.stop="toSetValue('motto', '修改个性签名', `&text=${userInfo.motto || ''}`)"
    />

    <Cell
      class="cell-2"
      rightIcon
      label="性别"
      :content="`${userInfo.sex == 0 ? '女' : userInfo.sex == 1 ? '男' : '未知'}`"
      @click.stop="ageShow = !ageShow"
    />

    <Field
      rightIcon
      disabled
      label="年龄"
      placeholder="去填写"
      v-model="userInfo.age"
      @click.stop="toSetValue('age', '修改年龄', `&valueType=number&text=${userInfo.age || ''}`)"
    />

    <Field
      rightIcon
      disabled
      label="邮箱"
      placeholder="去填写"
      v-model="userInfo.email"
      @click.stop="toSetValue('email', '修改邮箱', `&valueType=email&text=${userInfo.email || ''}`)"
    />

    <Field
      rightIcon
      disabled
      autosize
      label="收货地址"
      placeholder="去填写"
      v-model="userInfo.take_address"
      @click.stop="toSetValue('take_address', '收货地址', `&text=${userInfo.take_address || ''}`)"
    />

    <Popup v-model:show="ageShow" class="age-popup-wrap">
      <view class="age-item" v-for="(item, index) in ageList" :key="item.id" @click="changeAge(item.id)">
        {{ item.title }}
      </view>
    </Popup>
  </Top-Page>
</template>

<script>
import Cell from '../../../components/Cell/Cell.vue';
import Field from '../../../components/Field/Field.vue';
import Popup from '../../../components/Popup/Popup.vue';

import { saveInfo } from '@/hooks/useSaveChanges';

import { mixins } from './mixin/index';
export default {
  mixins: [mixins],

  data() {
    return {
      saveInfo,
      ageShow: false,
      ageList: [
        { id: 2, title: '未知' },
        { id: 1, title: '男' },
        { id: 0, title: '女' }
      ]
    };
  },
  components: { Cell, Field, Popup },
  methods: {
    changeAge(id) {
      this.userInfo.sex = id;
      this.ageShow = !this.ageShow;

      this.saveInfo({
        sex: this.userInfo.sex
      });
    },
    //设置/修改 内容
    toSetValue(type, title, extra) {
      uni.navigateTo({
        url: `/pages/rest/modify/modify?type=${type}&title=${title}${extra ?? ''}`
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import url('./index.scss');
.cu-bar {
  background-color: transparent;
}

.cell-3 {
  flex-direction: column;
  align-items: flex-start;

  :deep(.cell-content),
  :deep(.field-value) {
    margin-top: 12rpx;
    width: 100%;
    flex: 1;
    text-align: left;
    background-color: #f3f3f3;
    padding: 24rpx;
    border-radius: 12rpx;

    .cell-content-text,
    .inp {
      min-height: 3em;
    }
  }
}

:deep(.age-popup-wrap) {
  top: auto;
  left: 0;
  bottom: 0;
  transform: translate3d(0, 0, 0);
  width: 100%;
  border-radius: 12px 12px 0 0;
  padding: 24rpx 0;

  .age-item {
    border-bottom: 1rpx solid #f4f4f4;
    text-align: center;
    padding: 24rpx 0;
    font-size: calc(var(--amplified_base) * 32rpx);

    &:last-child {
      border: none;
    }
  }
}
</style>